<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <el-breadcrumb-item 
      v-for="(item, index) in breadcrumbItems" 
      :key="item.path"
      :to="index === breadcrumbItems.length - 1 ? undefined : item.path"
      :class="{ 'is-current': index === breadcrumbItems.length - 1 }"
    >
      <el-icon v-if="item.icon && index === 0" class="breadcrumb-icon">
        <component :is="item.icon" />
      </el-icon>
      <span class="breadcrumb-text">{{ item.title }}</span>
      <el-tag v-if="item.tag" size="small" :type="item.tagType || 'info'" class="breadcrumb-tag">
        {{ item.tag }}
      </el-tag>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useMenuManager, type MenuItem } from '@/utils/menuManager'

interface BreadcrumbItem {
  title: string
  path: string
  icon?: any
  tag?: string
  tagType?: 'success' | 'warning' | 'danger' | 'info'
}

const route = useRoute()
const { getBreadcrumb } = useMenuManager()

// 模拟菜单数据，实际应该从菜单配置中获取
const menuData: MenuItem[] = [
  { title: '工作台', path: '/', icon: 'HomeFilled' },
  {
    title: '数据看板', path: '/data-board', icon: 'DataLine',
    children: [
      { title: '文案数据', path: '/data-board/copywriting-data' },
      { title: '商品数据', path: '/data-board/goods' },
      { title: '会员数据', path: '/data-board/member-data' },
      { title: '积分数据', path: '/data-board/points-data' },
      { title: '优惠券数据', path: '/data-board/coupon-data' },
      { title: '仓储数据', path: '/data-board/warehouse-data' },
      { title: '客服数据', path: '/data-board/service-data' },
      { title: '商品推荐数据', path: '/data-board/recommend' }
    ]
  },
  {
    title: '会员管理', path: '/member', icon: 'User',
    children: [
      { title: '会员管理', path: '/member/list', tag: '热门' },
      { title: '会员等级管理', path: '/member/level' },
      { title: '会员标签管理', path: '/member/tag' }
    ]
  },
  { title: '订单管理', path: '/order', icon: 'List' },
  {
    title: '商品管理', path: '/product', icon: 'Box',
    children: [
      { title: '商品管理', path: '/product/list' },
      { title: '商品审核', path: '/product/audit', tag: '待处理', tagType: 'warning' as const },
      { title: '分类管理', path: '/product/category' },
      { title: '平台分类管理', path: '/product/platform-category' },
      { title: '商品标签', path: '/product/tag' },
      { title: '平台映射', path: '/product/platform-mapping' },
      { title: '商品推荐管理', path: '/product/recommend' }
    ]
  },
  {
    title: '仓储中心', path: '/warehouse', icon: 'OfficeBuilding',
    children: [
      { title: '库位管理', path: '/warehouse/location' },
      { title: '仓库盘点', path: '/warehouse/inventory', tag: '进行中', tagType: 'success' as const }
    ]
  },
  {
    title: '运营管理', path: '/operation', icon: 'Promotion',
    children: [
      { title: '文案管理', path: '/operation/copywriting-manage' },
      { title: '优惠券管理', path: '/operation/coupon' },
      { title: '优惠券领取情况', path: '/operation/coupon-receive' },
      { title: '首页装修', path: '/operation/home-design' },
      { title: '系统公告', path: '/operation/announcement-manage' }
    ]
  },
  {
    title: '积分管理', path: '/points', icon: 'Box',
    children: [
      { title: '日常任务管理', path: '/points/task' },
      { title: '营销活动管理', path: '/points/activity', tag: '新功能', tagType: 'success' as const },
      { title: '积分配置', path: '/points/config' },
      { title: '积分日志', path: '/points/log' },
      { title: '积分订单', path: '/points/order' },
      { title: '积分商品', path: '/points/goods' },
      { title: '积分统计', path: '/points/stat' },
      { title: '用户积分管理', path: '/points/user-manage' },
      { title: '风控管理', path: '/points/risk-control' }
    ]
  },
  {
    title: '客服中心', path: '/service', icon: 'Service',
    children: [
      { title: '会话管理', path: '/service/session' },
      { title: '工单管理', path: '/service/ticket', tag: '紧急', tagType: 'danger' },
      { title: '客服管理', path: '/service/staff' },
      { title: '离职继承', path: '/service/handover' },
      { title: '客服满意度评价', path: '/service/satisfaction' },
      { title: '客服排班管理', path: '/service/scheduling' },
      { title: '知识库管理', path: '/service/knowledge' },
      { title: '快捷回复管理', path: '/service/quick-reply' },
      { title: '会话标签管理', path: '/service/tag' },
      { title: '客服绩效统计', path: '/service/performance' },
      { title: '机器人客服', path: '/service/robot', tag: 'AI', tagType: 'info' }
    ]
  },
  {
    title: '知识库', path: '/knowledge', icon: 'DocumentCopy',
    children: [
      { title: '内容管理', path: '/knowledge/content' },
      { title: '分类管理', path: '/knowledge/category' },
      { title: '标签管理', path: '/knowledge/tag' },
      { title: '统计分析', path: '/knowledge/stat' }
    ]
  },
  { title: '财务管理', path: '/finance', icon: 'WalletFilled' },
  { title: '报表中心', path: '/report', icon: 'PieChart' },
  {
    title: '基础设置', path: '/settings', icon: 'Setting',
    children: [
      { title: '员工管理', path: '/settings/staff' },
      { title: '角色管理', path: '/settings/role' },
      { title: '站点管理', path: '/settings/site' },
      { title: '账号管理', path: '/settings/account' },
      { title: '收费管理', path: '/settings/extra-service' },
      { title: '附加服务', path: '/settings/additional-service' },
      { title: '国际物流运费规则', path: '/settings/freight-rule' },
      { title: '工作流配置', path: '/settings/workflow' },
      { title: '卖家管理', path: '/settings/seller' },
      { title: '包裹设置', path: '/settings/package' },
      { title: '汇率管理', path: '/settings/exchange' },
      { title: '推送方式管理', path: '/settings/push-method' }
    ]
  },
  { title: '操作日志', path: '/log', icon: 'DocumentChecked' }
]

// 计算面包屑导航项
const breadcrumbItems = computed(() => {
  const currentPath = route.path
  
  // 使用菜单管理器获取面包屑
  const breadcrumb = getBreadcrumb(menuData, currentPath)
  
  if (breadcrumb.length > 0) {
    return breadcrumb
  }
  
  // 如果菜单管理器没有找到，则根据路由生成
  const matched = route.matched
  const items: BreadcrumbItem[] = []
  
  matched.forEach((item, index) => {
    if (item.meta?.title) {
      items.push({
        title: item.meta.title as string,
        path: item.path,
        icon: item.meta.icon
      })
    }
  })
  
  return items
})
</script>

<style scoped>
.app-breadcrumb {
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}

.breadcrumb-icon {
  margin-right: 4px;
  font-size: 14px;
  color: #909399;
}

.breadcrumb-text {
  font-size: 14px;
  color: #606266;
}

.breadcrumb-tag {
  margin-left: 8px;
  font-size: 10px;
}

.el-breadcrumb__item.is-current .breadcrumb-text {
  color: var(--theme-color);
  font-weight: 600;
}

.el-breadcrumb__item:not(.is-current):hover .breadcrumb-text {
  color: var(--theme-color);
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-breadcrumb {
    padding: 12px 16px;
  }
  
  .breadcrumb-text {
    font-size: 13px;
  }
  
  .breadcrumb-tag {
    font-size: 9px;
  }
}
</style>
